<template>
    <div>
        <p class="font-bold border-b pb-1 border-gray-400">{{ title }}</p>
        <div class="list-img">
            <div v-for="(item, index) in fanList" :key="index" :title="item.nickname">
                <div class="w-12">
                    <n-image :src="item.avatarUrl"></n-image>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage} from 'naive-ui';
export default {
    // 喜欢歌单或者专辑的人的列表
    name: "SongFanList",
    props: {
        title: {
            type: String,
            default: '喜欢的人'
        },
        // 喜欢的人列表
        fanList: {
            type: Array,
            default: () => []
        }
    },
    setup(props) {
        const TAG = "SongFanList.vue";
    },
    components: {
        NImage
    }
}
</script>

<style scoped lang="scss">
.list-img {
    @apply grid grid-cols-4 gap-2 mt-4 ;
}
</style>